<div class="card">
    <div class="card-header">
        <h1 class="card-title">用户登录测试</h1>
    </div>
    <div class="card-content">
        <p style="font-size: 16px; line-height: 1.6; color: #666; margin-bottom: 32px;">
            这里提供了用户登录功能的测试界面，可以测试手机验证码登录API的正常工作。
        </p>

        <!-- 用户登录测试 -->
        <div style="margin-bottom: 40px; padding: 24px; background: #f0f8ff; border-radius: 12px; border: 1px solid #b3d9ff;">
            <h3 style="font-size: 20px; font-weight: 600; color: #333; margin-bottom: 24px; border-bottom: 2px solid #007bff; padding-bottom: 8px;">
                手机验证码登录
            </h3>
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; font-weight: 600; color: #333; margin-bottom: 8px;">手机号:</label>
                <input type="text" id="userPhone" value="13800138000" 
                       style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;">
            </div>
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; font-weight: 600; color: #333; margin-bottom: 8px;">验证码:</label>
                <div style="display: flex; gap: 12px;">
                    <input type="text" id="userCode" value="123456" 
                           style="flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px;">
                    <button onclick="sendVerificationCode()" id="sendCodeBtn" class="btn" 
                            style="background: #6c757d; color: white; border-color: #6c757d; white-space: nowrap;">
                        发送验证码
                    </button>
                </div>
            </div>
            
            <button onclick="testUserLogin()" id="userLoginBtn" class="btn" 
                    style="background: #28a745; color: white; border-color: #28a745; margin-right: 12px;">
                测试用户登录
            </button>
            
            <div id="userResult" style="margin-top: 16px; display: none;"></div>
        </div>
        
        <!-- API信息 -->
        <div style="margin-bottom: 32px; padding: 24px; background: #fff8f0; border-radius: 12px; border: 1px solid #ffd9b3;">
            <h3 style="font-size: 18px; font-weight: 600; color: #333; margin: 0 0 16px 0;">API接口信息</h3>
            <div style="margin-bottom: 12px;">
                <strong>发送验证码:</strong>
                <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px;">
                    POST /api/mobile/auth/send-code
                </code>
            </div>
            <div>
                <strong>用户登录:</strong>
                <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px;">
                    POST /api/mobile/auth/login
                </code>
            </div>
        </div>
        
        <!-- 返回链接 -->
        <div style="text-align: center; margin-top: 32px;">
            <a href="/preview" class="btn" style="background: #6c757d; color: white; border-color: #6c757d;">
                返回预览首页
            </a>
        </div>
    </div>
</div>

<script>
// 发送验证码
async function sendVerificationCode() {
    const btn = document.getElementById('sendCodeBtn');
    const phone = document.getElementById('userPhone').value.trim();
    
    if (!phone) {
        alert('请填写手机号');
        return;
    }
    
    btn.disabled = true;
    btn.textContent = '发送中...';
    
    try {
        const response = await fetch('/api/mobile/auth/send-code', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                phone: phone
            })
        });
        
        const data = await response.json();
        
        if (response.ok && data.code === 200) {
            alert('验证码发送成功！');
        } else {
            alert(`发送失败: ${data.message || '未知错误'}`);
        }
    } catch (error) {
        alert(`请求失败: ${error.message}`);
    } finally {
        btn.disabled = false;
        btn.textContent = '发送验证码';
    }
}

// 用户登录测试
async function testUserLogin() {
    const btn = document.getElementById('userLoginBtn');
    const result = document.getElementById('userResult');
    const phone = document.getElementById('userPhone').value.trim();
    const code = document.getElementById('userCode').value.trim();
    
    if (!phone || !code) {
        showResult(result, '请填写手机号和验证码', 'error');
        return;
    }
    
    btn.disabled = true;
    btn.textContent = '登录中...';
    result.style.display = 'block';
    showResult(result, '正在发送登录请求...', 'loading');
    
    try {
        const response = await fetch('/api/mobile/auth/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                phone: phone,
                code: code
            })
        });
        
        const data = await response.json();
        
        if (response.ok && data.code === 200) {
            showResult(result, `登录成功！<br>
                <strong>用户信息:</strong><br>
                ID: ${data.data.user.id}<br>
                手机号: ${data.data.user.phone}<br>
                昵称: ${data.data.user.nickname || '未设置'}<br>
                <strong>Token:</strong> ${data.data.token.substring(0, 50)}...`, 'success');
        } else {
            showResult(result, `登录失败: ${data.message || '未知错误'}`, 'error');
        }
    } catch (error) {
        showResult(result, `请求失败: ${error.message}`, 'error');
    } finally {
        btn.disabled = false;
        btn.textContent = '测试用户登录';
    }
}

// 显示结果
function showResult(element, message, type) {
    element.innerHTML = message;
    element.className = `result ${type}`;
    
    // 添加样式
    if (!document.getElementById('resultStyles')) {
        const style = document.createElement('style');
        style.id = 'resultStyles';
        style.textContent = `
            .result {
                padding: 16px;
                border-radius: 8px;
                font-size: 14px;
                line-height: 1.5;
            }
            .result.success {
                background: #d4edda;
                color: #155724;
                border: 1px solid #c3e6cb;
            }
            .result.error {
                background: #f8d7da;
                color: #721c24;
                border: 1px solid #f5c6cb;
            }
            .result.loading {
                background: #d1ecf1;
                color: #0c5460;
                border: 1px solid #bee5eb;
            }
        `;
        document.head.appendChild(style);
    }
}
</script>
